<template>
  <div>
    <h1>computed 函数</h1>
    <ul>
      <li>{{ count }}</li>
      <li>2 倍 count：{{ doubleCount }}</li>
      <li><hr /></li>
      <li>{{ list }}</li>
      <li>工资大于 12000 人数：{{ highPerson }}</li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script setup>
/**
 * computed 函数
 * 步骤：
 * 1. 导入 computed 函数
 * 2. 调用 computed 函数定义计算属性变量
 * 语法：const 变量名 = computed(() => { return 根据 data 变量计算得到的结果 })
 * 特点：
 * 1. 缓存=》性能好
 * 2. 同步
 */
import { computed, ref } from 'vue'
const count = ref(10)
// 需求 1：计算得到 count 的 2 倍 的值
const doubleCount = computed(() => {
  return count.value * 2
})
// 需求 2：根据工资列表得到工资大于 12000的人数
const list = ref([
  { id: 1, name: '王老吴', sa: 11000 },
  { id: 2, name: '李斯', sa: 13000 },
  { id: 3, name: '张三', sa: 10000 }
])
const highPerson = computed(() => {
  return list.value.filter((item) => item.sa > 12000).length
})
</script>

<style lang="scss" scoped></style>
